<template>
  <div class="event-fight">
    <div v-if="display === 'ready'" class="fight-ready">
      <template v-if="!fight.complete">
        <div class="fight-ready-content">
          <div class="fight-ready-tip">前方出现了 <em>{{ fight.enemy.data.name }}</em>！</div>
          <div class="fight-ready-decide">
            <div class="fight-ready-decide-btn" @click="goFight">开始战斗</div>
          </div>
        </div>
      </template>
      <template v-if="fight.complete">
        <div class="fight-ready-content">
          <div class="fight-ready-tip" v-if="!state.recovery">这个地方似乎会有 <em>{{ fight.enemy.data.name }}</em> 出现</div>
          <div class="fight-ready-tip" v-if="state.recovery">搜寻到了 <em>{{ fight.enemy.data.name }}</em>！</div>
          <div v-if="state.search" class="fight-ready-countdown">正在搜寻中（{{ fight.search.countDown }} 秒）</div>
          <div v-if="state.recovery" class="fight-ready-countdown">等待生命值恢复后开始战斗</div>
          <div class="fight-ready-decide">
            <div v-if="!state.search && !state.recovery" class="fight-ready-decide-btn" @click="goSearch">进行搜寻</div>
          </div>
        </div>
      </template>
      <div class="fight-ready-setting">
        <div class="fight-ready-setting-title">
          战斗设置
        </div>
        <div class="fight-ready-setting-content">
          <div class="fight-ready-setting-item">
            <div class="fight-ready-setting-item-btn" @click="setting.ready.autoContinueSearch = !setting.ready.autoContinueSearch">
              <div>自动继续搜寻</div>
              <div class="fight-ready-setting-item-btn-toggle-text">{{ settingShow.ready.autoContinueSearch }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="display === 'run'" class="fight-run">
      <div class="enemy">
        <div class="enemy-name">{{ fight.enemy.obj.attribute.name }}</div>
        <div class="enemy-hp">生命：{{ fight.enemy.obj.attribute.hp.current }} / {{ fight.enemy.obj.attribute.hp.max }}</div>
        <Progress :percent="fight.enemy.obj.hpPercent" stroke-color="#FF461F" :stroke-width="14" hide-info class="enemy-hp-bar" />
      </div>
    </div>
  </div>
</template>

<script>
import EnemyData from '@/game/data/enemy'

export default {
  name: 'EventFight',

  data() {
    return {
      display: 'ready',
      fight: {
        complete: false,
        search: {
          countDown: 0,
        },
        id: 0,
        enemy: {
          data: {},
          obj: {}
        },
      },
      state: {
        fight: false,
        search: false,
        recovery: false
      },
      setting: {
        ready: {
          autoContinueSearch: false
        }
      },
      updateFlag: {
        map: {
          move: 0,
        },
        event: {
          fight: {
            complete: 0,
          }
        }
      }
    }
  },

  computed: {
    renderCount() {
      return this.$store.state.renderCount
    },
    settingShow() {
      return {
        ready: {
          autoContinueSearch: this.setting.ready.autoContinueSearch ? '开启' : '关闭'
        }
      }
    }
  },

  watch: {
    renderCount() {
      refreshData(this)
    },
    'state.fight' (val) {
      if (val) {
        this.display = 'run'
      }
      else {
        this.display = 'ready'
      }
    },
    'updateFlag.map.move' (val) {
      if (val) {
        readyFight(this)
      }
    },
    'setting.ready.autoContinueSearch' () {
      this.$game.data.setting.event.fight.ready.autoContinueSearch = this.setting.ready.autoContinueSearch
    },

  },

  mounted() {
    refreshData(this)
    readyFight(this)
    initSetting(this)
  },

  methods: {
    goFight() {
      this.$game.tempData.state.fight.change = true
    },
    goSearch() {
      this.$game.tempData.state.search.change = true
    }
  },
}

let refreshData = (that) => {
  that.fight.id = that.$game.data.state.event.fight.id
  that.fight.complete = that.$game.tempData.event.complete

  that.state.fight = that.$game.tempData.state.fight.current
  if (that.state.fight) {
    that.fight.enemy.obj = that.$game.tempData.event.fight.enemy.obj
  }

  that.state.search = that.$game.tempData.state.search.current
  if (that.state.search) {
    let tick = that.$game.tempData.character.search.nextActionTick - that.$game.tickCount + 1
    that.fight.search.countDown = that.$util.transformDecimal((Math.ceil(tick * that.$game.tickTime / 100) / 10), 1)
  }

  that.state.recovery = that.$game.tempData.state.recovery.current

  that.updateFlag.map.move = that.$game.tempData.updateFlag.map.move
}

let readyFight = (that) => {
  that.display = 'ready'
  that.fight.enemy.data = that.$game.tempData.event.fight.enemy.data = EnemyData['enemy' + that.fight.id]
}

let initSetting = (that) => {
  that.setting.ready.autoContinueSearch = that.$game.data.setting.event.fight.ready.autoContinueSearch
}
</script>

<style lang="scss">

</style>
